<template>
	<view>
		<ul>
			<li>
				<view class="left">
					<view class="img1">
						<image-view class="img" :src="item.captureUrl"></image-view>
					</view>
					<view class="img1">
						<image-view class="img" :src="item.topns[0].faceUrl"></image-view>
					</view>
				</view>
				<view class="right">
					<view class="line">
						<view class="title">{{ item.monitorName }}</view>
						<view class="Proportion">{{ item.topns[0].simScore | toPercent() }}</view>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/hit.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{ item.topns[0].facedbName }}</text>
					</view>
					<view class="line_box">
						<uni-icons class="icon" type="contact" size="18"></uni-icons>
						<text class="text">{{ item.topns[0].faceName }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/camera.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{ item.deviceName }}</text>
					</view>
					<view class="line_box">
						<image class="icon" src="/static/images/time.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{ item.alarmTime | formatDate('-') }}</text>
					</view>
					<view class="line_box">
						<!-- <image class="icon" src="/static/images/time.png" style="margin-left: 7rpx;"></image> -->
						<uni-icons type="pyq" size="20" style="margin-left: 7rpx;"></uni-icons>
						<text class="text" v-if="item.isAlarm == 0">{{ $t('warn:pendingReview') }}</text>
						<text class="text" v-if="item.isAlarm == 1">{{ $t('warn:ok') }}</text>
						<text class="text" v-if="item.isAlarm == 2">{{ $t('warn:cancel') }}</text>
						<text class="text" v-if="item.isAlarm == 3">{{ $t('warn:doubtful') }}</text>
					</view>
					<!-- <view class="line_box">
						<image class="icon" src="/static/images/hit.png" style="margin-left: 7rpx;"></image>
						<text class="text">{{item.topnList[0].isAlarm}}</text>
					</view> -->
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {}
	},
	created() {
	},
	methods: {

	},
	filters: {
		// 时间戳处理
		formatDate: function (num) {
			let date = new Date(num);
			//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM; //月补0
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d; //天补0
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h; //小时补0
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m; //分钟补0
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s; //秒补0
			return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
		},
		toPercent: function (point) {
			var str = Number(point * 100).toFixed(2);
			str += "%";
			return str;
		},
		// formatSex:function(str) {

		// }
	}
}
</script>

<style scoped>
ul,
li {
	list-style: none;
}

ul {
	display: flex;
	flex-direction: column;
	padding: 0 30rpx;
}

ul li {
	padding: 30rpx 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
}

.left {
	width: 43%;
	display: flex;
	align-items: center;
	justify-content: start;
}

.left .img1 {
	width: 50%;
}

.img1:first-child .img {
	padding-right: 10rpx;
}

.img1 .img {
	width: 100%;
	height: 260rpx;
	border-radius: 10rpx;
}

.right {
	width: 57%;
	padding-left: 25rpx;
}

.right .line {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.right .line .title {
	font-size: 34rpx;
}

.right .line .Proportion {
	font-size: 40rpx;
	background-color: #f76f3a;
	padding: 10rpx 20rpx;
	color: #fff;
	border-radius: 8rpx;
}

.right .line_box {
	display: flex;
	align-items: center;
	flex-direction: row;
	padding: 4rpx 0;
}

.right .line_box .text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.icon {
	padding: 5rpx;
	width: 40rpx;
	height: 40rpx;
}
</style>
